<template>
  <div class="filter-section">
    <div class="filter-item">
      <span class="filter-label">题目难度：</span>
      <difficulty-tags @level-change="onLevelChange" />
    </div>
    <div class="filter-item">
      <span class="filter-label">题目类型：</span>
      <subject-types @type-change="onTypeChange" />
    </div>
  </div>
</template>

<script>
import DifficultyTags from './DifficultyTags.vue'
import SubjectTypes from './SubjectTypes.vue'

export default {
  name: 'FilterSection',
  components: {
    DifficultyTags,
    SubjectTypes
  },
  methods: {
    onLevelChange(level) {
      this.$emit('level-change', level)
    },
    onTypeChange(type) {
      this.$emit('type-change', type)
    }
  }
}
</script>

<style scoped>
.filter-section {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 12px;
}

.filter-item {
  display: flex;
  align-items: center;
}

.filter-label {
  font-size: 14px;
  color: #666;
  margin-right: 8px;
  white-space: nowrap;
}
</style> 